solution #4487
solution #4487
Conversation
There was a problem hiding this comment.
Great job on addressing most of the feedback! There are a few minor issues to keep in mind for the future, such as fixing typos in class names for consistency and ensuring fallback fonts are provided. Also, remember to avoid using the universal selector for performance reasons and keep your indentation consistent. These are small improvements that can enhance the quality of your code. Keep up the good work! 👍💻
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| class="big-search-form" | ||
| data-qa="big" |
There was a problem hiding this comment.
The class name big-search-form does not represent the meaning of the content. Consider using a name that reflects the function of the form rather than its appearance. For example, search-form or main-search-form could be more appropriate if this form is intended for searching content.
| <form | ||
| class="small-seach-form" | ||
| data-qa="small" |
There was a problem hiding this comment.
There seems to be a typo in the class name small-seach-form. It should be small-search-form to maintain consistency and correct naming.
| <form | ||
| class="big-search-form" | ||
| data-qa="big" | ||
| > | ||
| <input | ||
| class="search-form__input search-form__input--big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
Remember to use 2 spaces for indentation in your file. The <input> element nested within the <form> element should be indented with 2 spaces relative to its parent.
| <form | ||
| class="small-seach-form" | ||
| data-qa="small" | ||
| > | ||
| <input | ||
| class="search-form__input search-form__input--small" | ||
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
The indentation here is inconsistent with the rest of the file. Ensure that the <input> element is indented with 2 spaces relative to its parent <form> element.
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
Don't use * selector (it impacts performance). Set styles only for elements that require them.
|
|
||
| color: #3d4e61; | ||
|
|
||
| font-family: Avenir-Book, serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, font-family: Avenir-Book, Arial, sans-serif;.
| } | ||
|
|
||
| .search-form__input::placeholder { | ||
| font-family: Avenir-Book, sans-serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, font-family: Avenir-Book, Arial, sans-serif;.
| } | ||
|
|
||
| .search-form__input:focus { | ||
| font-family: Avenir-Heavy, serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, font-family: Avenir-Heavy, Arial, sans-serif;.
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| .small-seach-form { |
There was a problem hiding this comment.
There is a typo in the class name .small-seach-form, it should be .small-search-form.
DEMO LINK
TEST REPORT LINK
Icon implemented using background-image CSS property
Inputs are written inside of 'form' tag with correctly passed attributes
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️